feat: implement dynamic navbar toggle and logout redirect flow#564
Conversation
❌ Deploy Preview for github-spy failed.
|
There was a problem hiding this comment.
🎉 Thank you @Tannuu18 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
|
Warning Review limit reached
More reviews will be available in 51 minutes and 52 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughPR adds centralized authentication state management via React Context, backend session normalization, and auth API endpoints. The navbar now conditionally displays Login/Signup links when unauthenticated or a Logout button when authenticated. Login form integrates with auth state, and logout properly clears the session and redirects. ChangesAuthentication State & Navbar Logout
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
backend/routes/auth.js (1)
50-65:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUse POST for logout to avoid CSRF-prone state changes.
Line 50 exposes logout as
GET, which allows cross-site triggers of a state-changing action. This should be a non-GET endpoint (typicallyPOST) and called accordingly from the client.Proposed fix
- router.get("/logout", (req, res) => { + router.post("/logout", (req, res) => {- await axios.get(`${backendUrl}/api/auth/logout`, { - withCredentials: true, - }); + await axios.post( + `${backendUrl}/api/auth/logout`, + undefined, + { withCredentials: true } + );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@backend/routes/auth.js` around lines 50 - 65, The logout route is implemented as a GET which causes a state-changing action to be CSRF-vulnerable; change the route declaration from router.get("/logout", ...) to router.post("/logout", ...) (the handler body using req.logout and req.session.destroy stays the same), and update any client code/tests that call this endpoint to perform a POST request; optionally ensure CSRF protection/middleware is applied to the POST route if your app uses CSRF tokens.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Navbar.tsx`:
- Around line 29-33: The handleLogout function awaits logout() without error
handling so a rejection will abort the UI flow; wrap the logout() call in
try/catch (or try/catch/finally) inside handleLogout so failures are caught and
logged, and ensure closeMenu() and navigate("/login", { replace: true }) still
run in the finally path (or after a successful logout) to keep the UI
consistent; reference the handleLogout function and the logout, closeMenu, and
navigate calls when making the change.
- Around line 18-19: The navbar is showing unauthenticated links while auth
state is still loading because only isAuthenticated from authContext is used;
update the Navbar to read the authContext's loading flag (e.g., isLoading)
alongside isAuthenticated and only render Login/Signup when isLoading is false
and isAuthenticated is false, and similarly avoid rendering authenticated-only
links (like the /me link, logout button) while isLoading is true; update all
locations using isAuthenticated (references: authContext, isAuthenticated,
logout, and the Navbar render branches around lines that control Login/Signup vs
/me/logout) to gate rendering on !isLoading before deciding which link set to
show.
---
Outside diff comments:
In `@backend/routes/auth.js`:
- Around line 50-65: The logout route is implemented as a GET which causes a
state-changing action to be CSRF-vulnerable; change the route declaration from
router.get("/logout", ...) to router.post("/logout", ...) (the handler body
using req.logout and req.session.destroy stays the same), and update any client
code/tests that call this endpoint to perform a POST request; optionally ensure
CSRF protection/middleware is applied to the POST route if your app uses CSRF
tokens.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c9a5abb7-4327-4974-96ce-cb467698aad9
📒 Files selected for processing (7)
backend/config/passportConfig.jsbackend/routes/auth.jssrc/components/Navbar.tsxsrc/components/__test__/Navbar.test.tsxsrc/context/AuthContext.tsxsrc/main.tsxsrc/pages/Login/Login.tsx
|
heyy @mehul-m-prajapati can you please review and merge the issue?? |
|
🎉🎉 Thank you for your contribution! Your PR #564 has been merged! 🎉🎉 |
Related Issue
Description
Fixed the navbar auth flow so it reflects the real session state. After login, the navbar now hides [Login] and [Signup], shows Logout, and clears the session correctly on logout.
How Has This Been Tested?
Ran the focused navbar test suite: npm test -- --run src/components/test/Navbar.test.tsx
Verified the auth-related JSX and session flow in the updated navbar, login page, and backend logout route
Confirmed logout redirects to the login page after clearing the session
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Tests